<template>
  <div>
    <div style="margin-bottom: 5px">
      <el-input
        v-model="strfilter"
        placeholder="请输入订单号"
        style="width: 200px"
        class="filter-item"
        size="small"
        clearable
        @keyup.enter.native="search(strfilter)"
      />
      <el-button
        class="filter-item"
        type="primary"
        size="small"
        @click="search(strfilter)"
      >
        查询
      </el-button>
    </div>
    <div>
      <el-table
        ref="selectVal"
        :data="list"
        border
        fit
        height="50vh"
        highlight-current-row
        style="overflow: auto"
        @row-click="rowClick"
        :row-class-name="rowIndex"
      >
        <!-- ---复选列--- -->
        <el-table-column v-if="multi == 1" type="selection" width="40" />
        <!-- ---单选列--- -->
        <el-table-column v-else label="" width="40" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-radio
              v-model="radio"
              :label="scope.$index"
              @change.native="getCurrentRow(scope.row)"
            >
              {{ " " }}</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column
          label="订单号"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.orderId }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="单据日期"
          align="center"
          min-width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="单据类型"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ dict.label.qb_order_state[scope.row.orderType] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="经销商"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.clientName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单总数量"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.number }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单金额"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.totalPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="收货人"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.consignee }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="scope.row.isDelete == 1">已关闭</span>
            <div v-else>
              <span v-if="scope.row.state == 1">新建</span>
              <span v-else-if="scope.row.state == 2">提交</span>
              <span v-else-if="scope.row.state == 3">初审</span>
              <span v-else-if="scope.row.state == 4">审核</span>
              <span v-else-if="scope.row.state == 5">生产中</span>
              <span v-else-if="scope.row.state == 6">生产完成</span>
              <span v-else-if="scope.row.state == 7">已发货</span>
              <span v-else style="color: red">异常</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          align="center"
          min-width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.notes }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { allList } from "@/api/qb";
export default {
  components: {},
  dicts: ["qb_order_state"],
  props: ["multi", "state", "orderType"],
  data() {
    return {
      title: "墙布货品",
      list: [], //  列表数据
      strfilter: "", // 搜索框内输入的值
      total: 0,
      radio: "", // 单选用参数默认为0即可
      selrows: "", // 选择的内容 单选变量
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        orderId: null,
        clientId: null,
        clientName: null,
        province: null,
        brandId: null,
        createDateObj: null,
        state: null,
        orderType: null,
      },
    };
  },
  created() {},
  mounted() {
    // this.getList()
  },
  methods: {
    //  单选列方法
    getCurrentRow(row) {
      this.$forceUpdate();
      this.selrows = row;
      this.$emit("selRowVal", row);
    },
    // 加载列表
    getList() {
      if (!!this.state) {
        this.queryParams.state = this.state;
      }
      if (!!this.orderType) {
        this.queryParams.orderType = this.orderType;
      }
      const queryParams = {
        ...this.queryParams,
      };
      allList(queryParams).then((res) => {
        this.list = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    // 查询
    search(res) {
      this.queryParams.orderId = res;
      //   this.queryParams.SearchType = 1;
      this.queryParams.pageNum = 1;
      this.getList();
    },
    rowIndex({ row, rowIndex }) {
      row.row_index = rowIndex;
    },
    rowClick(row) {
      this.radio = row.row_index;
      this.getCurrentRow(row);
    },
  },
};
</script>
<style lang="scss" scoped>
.current-row {
  background: blue;
}
</style>
